<link rel="stylesheet" href="{{URL::asset('./css/store/storeHeader.css')}}">

<div class="main" id="storeHeader" style="background:white;">
    <div class="storeEssential">
        <div class="storeImg">
            <img :src="storeDetails.logo" alt="">
        </div>
        <div class="storeMes">
            <div class="storeTitle">
                <span class="storeName">@{{storeDetails.store_name}}</span>
                <img v-if="storeDetails.quality==2" src="{{URL::asset('./img/store/storeColloct.png')}}" alt="">
                <img v-if="storeDetails.hot==2" src="{{URL::asset('./img/store/storeHot.png')}}" alt="">
                <span class="storeTime">
                    服务时间：
                    <a>@{{storeDetails.workingtime}}</a></span>
            </div>
            <div class="storeGootAt">
                <img src="{{URL::asset('./img/store/storeGootAt.png')}}">擅长领域：
                <div v-for="(item,index) in storeDetails.cate_id" v-if="index<6">@{{item.name}}</div>
            </div>
            <div class="storeAddr" v-if="storeDetails.area_info">
                <img src="{{URL::asset('./img/store/storeAddr.png')}}">
                @{{storeDetails.area_info}}
            </div>
            <div class="storeMore">
                <span><img src="{{URL::asset('./img/store/storeTel.png')}}" alt="">@{{storeDetails.call}}</span>
                <span><img src="{{URL::asset('./img/store/storePraise.png')}}" alt="">@{{storeDetails.credit}}%</span>
            </div>
        </div>
        <div class="storeButton">
            <div class="storeCollect" :class="{active:storeDetails.is_collect==2}">
                <span v-if="storeDetails.is_collect==1" @click="setCollect">
                    <img src="{{URL::asset('./img/store/storeCollectFalse.png')}}" alt="">收藏
                </span>
                <span v-if="storeDetails.is_collect==2" @click="setCollect">
                    已收藏
                </span>
                <span class="storeCollectNum">@{{storeDetails.collections}}</span>
            </div>
            <div v-cloak>
                <el-popover placement="left" width="440" trigger="hover">
                    <div class="dialogTel" style="display:none;">
                        <!-- <div class="dialogTel_title">查看联系方式</div> -->
                        <div class="dialogTel_phone">
                            <img src="{{URL::asset('./img/store/dialogTel.png')}}" alt="">
                            <div>
                                <span class="store_phone">@{{storeDetails.phone}}</span>
                                <span class="store_ratio"><a style="margin-right:20px;">@{{storeDetails.seller_name}}</a><a>
                                        电话接通率：<span>
                                            100%
                                        </span>
                                    </a></span>
                            </div>
                        </div>
                        <div class="dialogTel_QR">
                            <img src="{{URL::asset('./img/store/dialogTelQR.png')}}" alt="">
                            <img src="{{URL::asset('./img/store/dialogTelbigQR.png')}}" alt="">
                            <span>扫码快速拨打电话</span>
                        </div>
                    </div>
                    <a slot="reference">
                        <img src="{{URL::asset('./img/store/storeCall.png')}}" alt="">联系供应商
                    </a>
                </el-popover>
            </div>
        </div>
    </div>
    <div class="storeNav">
        <div class="storeNav_title">
            <span :class="{active:showNab=='store'}"><a :href="'{{route('home.store.store')}}?id='+storeId">公司首页</a></span>
            <span :class="{active:showNab=='storesummary'}"><a :href="'{{route('home.store.storeSummary')}}?id='+storeId">公司简介</a></span>
            <span :class="{active:showNab=='storeimg'}"><a :href="'{{route('home.store.storeImg')}}?id='+storeId">图片展示</a></span>
            <span :class="{active:showNab=='storeservice'||showNab=='servicedetails'}"><a :href="'{{route('home.store.storeService')}}?id='+storeId">服务内容</a></span>
            <span><a href="{{route('home.goods.goodsList')}}">商品</a></span>
            <span :class="{active:showNab=='storecases' || showNab=='casesdetails'}"><a :href="'{{route('home.store.storeCases')}}?id='+storeId">案例展示</a></span>
            <span :class="{active:showNab=='storepartners'}"><a :href="'{{route('home.store.storePartners')}}?id='+storeId">合作伙伴</a></span>
            <span :class="{active:showNab=='storeevaluates' ||showNab=='evaluateslist' }"><a :href="'{{route('home.store.storeEvaluates')}}?id='+storeId">交易评价</a></span>
        </div>
    </div>
    <div class="storeSwiper">
        <div id="news_swiper" class="carousel slide" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#news_swiper" v-for="(item,index) in swiperData" :data-slide-to="index" :class="{active:index==0}"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item" :class="{active:index==0}" v-for="(item,index) in swiperData">
                    <a :href="item.link">
                        <img :src="item.thumb" alt="..."></a>
                </div>
            </div>
        </div>
    </div>
    <div class="storeTel_right">
        <el-popover placement="left" width="440" trigger="hover">
            <div class="dialogTel" style="display:none;">
                <div class="dialogTel_phone">
                    <img src="{{URL::asset('./img/store/dialogTel.png')}}" alt="">
                    <div>
                        <span class="store_phone">@{{storeDetails.phone}}</span>
                        <span class="store_ratio"><a style="margin-right:20px;">@{{storeDetails.seller_name}}</a><a>
                                电话接通率：<span>
                                    100%
                                </span>
                            </a></span>
                    </div>
                </div>
                <div class="dialogTel_QR">
                    <img src="{{URL::asset('./img/store/dialogTelQR.png')}}" alt="">
                    <img src="{{URL::asset('./img/store/dialogTelbigQR.png')}}" alt="">
                    <span>扫码快速拨打电话</span>
                </div>
            </div>
            <a slot="reference">
                <img class="storeTel_rightImg" src="{{URL::asset('./img/store/storeTel_right.png')}}">
            </a>
        </el-popover>
    </div>
</div>
@section('compontentScipts')
<script>
    $(() => {
        let storeHeader = new Vue({
            el: '#storeHeader',
            data: () => {
                return {
                    swiperData: [],
                    storeDetails: {},
                    showNab: '',
                    storeId: getQueryString('id'),
                }
            },
            created() {
                let pathnameArr = window.location.pathname.split('/');
                this.showNab = pathnameArr[(pathnameArr.length - 1)];
                if (!getQueryString('id')) {
                    window.location.href = "{{ route('home.store.storeList') }}";
                }
                let data = {
                    adsense_id: 9,
                };
                apiAjax("{{ route('home.public.advs')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.swiperData = res.data;
                        $('.carousel').carousel('cycle');
                    } else {}
                }, (erro) => {});
                this.getDetails()

            },
            mounted() {
                setTimeout(() => {
                    $(".dialogTel").css("display", 'block')
                });
                $(document).ready(() => {
                    $(document).scroll(() => {
                        let topHeight = $(document).scrollTop();
                        let clientWidth = document.body.clientWidth;
                        let astrictHeight = 650;
                        if (topHeight > astrictHeight) {
                            $(".storeTel_right").slideDown("fast", () => {
                                $(".storeTel_right").css("display", "flex")
                                $(".storeTel_right").css("overflow", "inherit");
                            })
                        } else {
                            $(".storeTel_right").hide("fast")
                        }


                    });
                });
            },
            methods: {
                setCollect() {
                    let storeDetailData = {
                        collect_id: this.storeId
                    }
                    apiAjax("{{ route('home.store.storeCollectApi')}}", 'post', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getDetails() {
                    let storeDetailData = {
                        id: this.storeId
                    }
                    apiAjax("{{ route('home.store.storeDetailsApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeDetails = res.data;
                        } else {}
                    }, (erro) => {});
                }
            }
        })
    })
</script>
@endsection